<template>
    <template v-if="filterColumn.type === `index`">
        <el-table-column
            show-overflow-tooltip
            align="center"
            width="55px"
            v-bind="filterColumn"
        >
            <template #header="scope">
                <template v-if="column.header">
                    <BaseRender :render="column.header" v-bind="{ ...scope, item: column }"></BaseRender>
                </template>
                <template v-else>
                    {{ scope.column.label || `序号` }}
                </template>
            </template>
            <template #default="scope">
                <BaseRender :render="column.render || indexRender" v-bind="{ ...scope, item: column }"></BaseRender>
            </template>
        </el-table-column>
    </template>
    <template v-else-if="filterColumn.type === `selection`">
        <el-table-column
            align="center"
            v-bind="filterColumn"
        >
            <template #default="scope" v-if="column.render">
                <BaseRender :render="column.render" v-bind="{ ...scope, item: column }"></BaseRender>
            </template>
        </el-table-column>
    </template>
    <template v-else>
        <el-table-column
            v-if="isShowColumn(filterColumn)"
            show-overflow-tooltip
            header-align="center"
            align="center"
            v-bind="filterColumn"
        >
            <template #header="scope">
                <template v-if="column.header">
                    <BaseRender :render="column.header" v-bind="{ ...scope, item: column }"></BaseRender>
                </template>
                <template v-else>
                    <template v-if="filterColumn.prop">
                        <slot :name="`${filterColumn.prop}Header`" v-bind="{ ...scope, item: column }">{{ scope.column.label }}</slot>
                    </template>
                    <template v-else>
                        {{ scope.column.label }}
                    </template>
                </template>
            </template>
            <template #default="scope">
                <template v-if="column.children && column.children.length">
                    <BaseTableColumn
                        v-for="(col, colIdx) in column.children"
                        :key="col.prop ? col.prop + colIdx : colIdx"
                        :column="col"
                    >
                        <template v-for="slot in Object.keys($slots)" #[slot]="colScope">
                            <slot :name="slot" v-bind="{ ...colScope, item: col }" />
                        </template>
                    </BaseTableColumn>
                </template>
                <template v-else-if="column.render">
                    <BaseRender :render="column.render" v-bind="{ ...scope, item: column }"></BaseRender>
                </template>
                <template v-else>
                    <slot :name="filterColumn.prop" v-bind="{ ...scope, item: column }">{{ scope.row[scope.column.property] }}</slot>
                </template>
            </template>
        </el-table-column>
    </template>
</template>

<script setup>
import { computed, useSlots } from 'vue'
import BaseRender from './BaseRender.vue'

defineOptions({
    name: 'BaseTableColumn'
})

const props = defineProps({
    column: {
        type: Object,
        default: () => ({})
    }
})
const slots = useSlots()
const filterColumn = computed(() => {
    const { children, ...args } = props.column
    return args
})

const indexRender = ({ $index }) => {
    return $index + 1
}

const isShowColumn = item => {
    const { isShow = true } = item
    if (typeof isShow === 'function') return isShow(item)
    return isShow
}
</script>

<style lang="scss" scoped></style>